
:root,
:root .aie-theme-light {
    --aie-app-toolbar-background-color: #fdfdfd;
    --aie-app-border: #e9e9e9;
    --aie-app-left-background-color: #f9f9f9;
    --aie-app-textarea-bg-color: #e9e9e9;
    --aie-app-bubble-sent-background-color: #a5f5a5;
    --aie-app-bubble-reveived-background-color: #a5f5f5;
}

:root .aie-theme-dark {
    --aie-app-toolbar-background-color: #1e2022;
    --aie-app-border: #444;
    --aie-app-left-background-color: #1e2022;
    --aie-app-textarea-bg-color: #606060;
    --aie-app-bubble-sent-background-color: #333333;
    --aie-app-bubble-reveived-background-color: #333333;
}

.aie-theme-light {
    @import (less)  'github-markdown-css/github-markdown-light.css';
  }
  
  .aie-theme-dark {
    @import (less)  'github-markdown-css/github-markdown-dark.css';
  }
  
.aie-container {
    .katex .katex-html {
        display: none;
    }

    .aie-container-body {
        display: flex;
        flex: 1;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .aie-container-toolbar {
        width: 55px;
        height: 100%;
        background-color: var(--aie-app-toolbar-background-color);
        border-right: solid 1px var(--aie-app-border);
    }

    .aie-container-left {
        width: 450px;
        background-color: var(--aie-app-left-background-color);
        border-right: solid 1px var(--aie-app-border);
        display: none;
    }

    .aie-container-app-models {
        display: flex;
        height: 26px;
        font-size: 20px;
        padding: 10px;
        color: var(--aie-text-color);
        border-bottom: solid 1px var(--aie-app-border);

        .aie-model-select {
            height: 24px;
            font-size: large;
        }
    }

    .aie-container-app-messages {
        flex: 1;
        overflow: auto;

        .aie-directory {
            margin: 30px 10px;
            width: calc(100% - 20px);
            overflow: hidden;
            z-index: 0;
            color: var(--aie-text-color);

            h5 {
                margin: 15px auto;
                text-align: center;
                font-size: 16px;
                text-indent: 4px;
                line-height: 10px;
            }

            a {
                color: var(--aie-text-color);
                height: 30px;
                font-size: 14px;
                line-height: 30px;
                text-decoration: none;
                width: 100%;
                display: inline-block;
                margin: 0;
                padding: 0;
                white-space: nowrap;
                overflow: hidden;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
            }

            a:hover {
                cursor: pointer;
                background-color: #334d660f;
                border-radius: 4px;
            }
        }

        .user-avatar {
            margin-left: 5px;
        }

        .bot-avatar {
            margin-right: 5px;
        }

        .message {
            margin: 10px;
            display: flex;
            vertical-align: middle;
        }

        .hidden-content {
            cursor: pointer;
            display: none;
            height: 100%;
            width: 40px;
            margin-left: 5px;
            border: none;
            font-size: large;
        }

        .message:hover .hidden-content {
            display: flex;
        }

        .message-sent {
            justify-content: flex-end;
        }

        .message-received {
            justify-content: flex-start;
        }

        .bubble {
            padding: 10px;
            display: inline-block;
            height: 100%;
            max-width: calc(100% - 117px);
        }

        .bubble-sent {
            border-radius: 20px 0;
            background-color: var(--aie-app-bubble-sent-background-color);
            align-self: flex-end;
        }

        .bubble-received {
            border-radius: 0 20px;
            background-color: var(--aie-app-bubble-reveived-background-color);
            align-self: flex-start;
        }
    }

    .aie-container-app-input {
        text-align: center;
        box-sizing: border-box;
    }

    .aie-message-container {
        background-color: var(--aie-app-textarea-bg-color);
        border: 1px solid var(--aie-app-border);
        border-radius: 10px;
        margin: 10px;
        text-align: center;
    }

    .aie-message-textarea {
        width: calc(100% - 40px);
        font-size: 16px;
        padding: 5px;
        outline: none;
        min-height: 20px;
        max-height: 200px;
        height: auto;
        overflow: auto;
        box-sizing: border-box;
        scrollbar-width: none;
        border: none;
        resize: none;
        background-color: var(--aie-app-textarea-bg-color);
        color: var(--aie-text-color);

        ::-webkit-scrollbar {
            display: none;
        }
    }

    .aie-image-button {
        border: none;
        /* 移除边框 */
        background: none;
        /* 移除背景 */
        padding: 0;
        /* 移除内边距 */
        cursor: pointer;
        /* 鼠标悬停时显示指针 */

        img {
            width: 100px;
            /* 设置图像宽度 */
            height: auto;
            /* 高度自适应 */
        }
    }

    .aie-container-right {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .aie-container-main {
        flex: 1;
        overflow: auto;
    }
}